<template>
	<div id="userCenter">
		<el-container>
			<el-aside>
				<el-menu :default-active="$route.path" router active-text-color="#fff">
					<el-image :src="pic(store.state.user.img)" 
						style="height: 56px;border-radius: 50%;"></el-image>
					<el-menu-item index="/usr/welcome/pwd" style="border-top: 1px solid #c8c7c7;">
						<template #title>
							<span>密码修改</span>
						</template>
					</el-menu-item>
					<el-menu-item index="/usr/welcome/avatar">
						<template #title>
							<span>个人头像修改</span>
						</template>
					</el-menu-item>
					<el-menu-item index="/usr/welcome/setting">
						<template #title>
							<span>个人信息修改</span>
						</template>
					</el-menu-item>

					<el-menu-item index="/usr/welcome/comment">
						<template #title>

							<span>我的评论</span>
						</template>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<el-main>
				<router-view />
			</el-main>
		</el-container>
	</div>
</template>

<script setup>
	import pic from '@/api/pic';
	import store from '@/store';
	import router from '@/router';
	import {
		useRoute
	} from 'vue-router';

	const route = useRoute();
</script>

<style lang="less">
	#userCenter {
		// 设置内边距全局布局
		// padding-left: 12%;
		// padding-right: 12%;
		padding: 0% 12%;
		height: 80vh;

		.el-container {
			height: 100%;

			.el-aside {
				border-left: 1px solid #c8c7c7;
				border-right: 1px solid #c8c7c7;

				.el-menu {
					border-right-width: 0px;

					.el-menu-item.is-active {
						background-color: #c8c7c7;
						margin: 0 !important;
						margin-left: 4px;
					}
				}
			}

		}

		.el-aside {
			height: 100%;
			width: 20% !important;
			text-align: center;
		}

	}
</style>